<template>
  <PageWrapper contentFullHeight fixedHeight contentClass="main-box">
    <div class="summary-content-box">
      <a-tabs v-model="activeKey">
        <template #rightExtra>
          <a-space>
            <DatePicker v-model:value="dateMonthValue" :allowClear="false" picker="month"> </DatePicker>
            <a-button type="primary" @click="handleCreate" :loading="exportLoading">添加损耗</a-button>
            <a-button type="primary" @click="handleExport" :loading="exportLoading">导出</a-button>

          </a-space>
        </template>
        <a-tab-pane key="1" tab="各子系统用电量变化图">
          <SummarySheetTab3 ref="tab3Ref" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="各系统用电量及变化率变化图" forceRender>
          <SummarySheetTab4 ref="tab4Ref" />
        </a-tab-pane>
        <a-tab-pane key="3" tab="各子系统用电量汇总" forceRender>
          <SummarySheetTab1 ref="tab1Ref" />
        </a-tab-pane>
        <a-tab-pane key="4" tab="各系统用电量及变化率" forceRender>
          <SummarySheetTab2 ref="tab2Ref" />
        </a-tab-pane>

      </a-tabs>

    </div>
    <AccountModal @register="registerModal" @success="handleSuccess" />
  </PageWrapper>
</template>
<script setup>
import { Card, DatePicker, message } from 'ant-design-vue'
import Icon from '@/components/Icon/Icon.vue'
import { ref, onMounted, reactive, watch } from 'vue'
import { PageWrapper } from '@/components/Page'
import { exportTableData } from '@/api/power/electricity/electricity.ts'
import { BasicTable, useTable } from '@/components/Table'
import { cloneDeep } from 'lodash-es'
import dayjs, { Dayjs } from 'dayjs'
import SummarySheetTab1 from './tab1/index.vue'
import SummarySheetTab2 from './tab2/index.vue'
import SummarySheetTab3 from './tab3/index.vue'
import SummarySheetTab4 from './tab4/index.vue'
import AccountModal from './AccountModal.vue'
import { useModal } from '@/components/Modal'
import {
  downloadByData,
} from '@/utils/file/download';

const dateMonthValue = ref(dayjs())
const commonConfig = reactive({
  tableData: [],//汇总统计数据
})
const [registerModal, { openModal }] = useModal()
defineOptions({ name: 'SummarySheet' })
const activeKey = ref('2')
let tab1Ref = ref()
let tab2Ref = ref()
let tab3Ref = ref()
let tab4Ref = ref()
const searchInfo = reactive({
  queryType: 'month',
  startDay: dateMonthValue.value.format('YYYY-MM'),
})
const exportLoading = ref(false)

onMounted(async () => {
   getData()
})

watch(
  () => dateMonthValue.value,
  async (readyVal) => {
    searchInfo.startDay = readyVal.format('YYYY-MM')
    getData()
  },
)
function handleSuccess({ isUpdate, values }) {
  if (isUpdate) {
    console.log(isUpdate, values);

    // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
    // updateTableDataRecord(values.id, values)
  } else {
    getData()
  }
}
function handleCreate() {
  openModal(true, {
    isUpdate: false,
  })
}
const getData = () => {
  // const searchInfo = {
  //   queryType: 'month',
  //   startDay: dateMonthValue.value.format('YYYY-MM'),
  // }
  tab1Ref.value.getData(searchInfo)
  tab2Ref.value.getData(searchInfo)
  tab3Ref.value.getData(searchInfo)
  tab4Ref.value.getData(searchInfo)
}

const handleExport = async () => {
  exportLoading.value = true
  const { data, headers } = await exportTableData({ ...searchInfo })
  let contentDisposition = decodeURIComponent(headers["content-disposition"]);
  const filenameMatch = contentDisposition.match(/filename\*=UTF-8''(.+)|filename="(.+)"|filename=(.+)/)
  const fileName = filenameMatch[1] || filenameMatch[2] || filenameMatch[3]
  downloadByData(data, fileName);
  exportLoading.value = false
  message.success("导出成功");
}

</script>
<style scoped lang="scss">
.summary-content-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px;
  background: #fff;

  :deep(.ant-tabs) {
    display: flex;
    flex-direction: column;
    height: 100%;

    .ant-tabs-content-holder {
      flex: 1;
      overflow: hidden;

      .ant-tabs-content {
        height: 100%;

        .ant-tabs-tabpane {
          display: flex;
          flex: 1;
          flex-direction: column;
          height: 100%;
          overflow: hidden;
        }

        .common-card-top {
          flex: 1;
          overflow: hidden;
        }

        .common-card-bottom {
          flex-shrink: 0;
          min-height: 142px;
          margin-top: 12px;
        }

        .common-card {
          display: flex;
          flex-direction: column;
          padding: 0;

          .ant-card-head {
            padding: 0;
          }

          .ant-card-body {
            flex: 1;
            padding-right: 0;
            padding-left: 0;
            overflow: hidden;

            .ant-table-wrapper {
              height: 100%;
              padding: 0;

              .ant-spin-nested-loading,
              .ant-spin-container,
              .ant-table,
              .ant-table-container {
                height: 100%;

              }

              .ant-table-container {
                display: flex;
                flex-direction: column;

                .ant-table-body {
                  flex: 1;
                  max-height: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
